<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="涉农主体详情"></u-navbar>
		<view class="fixed-top bg-white" style="margin-top: 44px;">
			<view class="dfes pl-3 pr-3 mt-2">
				<view :class="{'text-BD3124':userInfo.abnormal}">三亚芒果农业有限公司</view>
				<view v-if="userInfo.abnormal" class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded p">异常</view>
			</view>
			<view class="dfes mt-2 ml-3 mr-3">
				<view class="mr-2 p font-12 rounded  bg-FCE07F">
					<view class="text-FFC251">澄迈</view>
				</view>
				<view class="mr-2 p font-12 rounded  bg-FCE07F">
					<view class="text-FFC251">澄迈</view>
				</view>
			</view>

			<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
				:key="index">
				<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view style="margin-top: 120px;">

			<!-- <scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false"> -->
			<view class="" v-if="tabIndex === 0">
				<u-field v-model="userInfo.enterpriseName" :border-bottom="false" label="企业名称：" label-width="150"
					:disabled="true" >
				</u-field>
				<u-field v-model="userInfo.phone" :border-bottom="false" label="手机号：" label-width="130" :disabled="true"
					:field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.unifiedCreditCode" :border-bottom="false" label="统一信用代码：" label-width="200"
					:disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.registeredCapital" :border-bottom="false" :disabled="true" label-width="150"
					label="注册资本：" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.type" :border-bottom="false" :disabled="true" label="类型：" label-width="90"
					:field-style="placeholderStyle"></u-field>
				<u-field v-model="userInfo.legalRepresentative" :border-bottom="false" label="法定代表人：" :disabled="true"
					label-width="170" :field-style="placeholderStyle">
				</u-field>
				<u-field v-model="userInfo.showFoundedTimeHandler" :border-bottom="false" label="成立日期："
					label-width="140" :disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.businessTerm" :border-bottom="false" label="营业期限：" label-width="140"
					:disabled="true" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.address" :border-bottom="false" :disabled="true" label="主体地址："
					label-width="140" :field-style="placeholderStyle"></u-field>

				<u-field v-model="userInfo.showNatureBusinessHandler" :border-bottom="false" :disabled="true"
					label="经营范围：" label-width="140" :field-style="placeholderStyle"></u-field>
				<u-field v-model="userInfo.createTime" :border-bottom="false" label-width="140" :disabled="true"
					label="注册时间：" :field-style="placeholderStyle"></u-field>

				<view class="icon-hao iconfont pl-3 pr-3 mt-5  bg-F5C9C5 text-BD3124 ml-3 mr-3 py-1 rounded-10 " v-if="userInfo.abnormal"> 
					<text>该品牌企业已被加入黑名单！</text>
				</view>
			</view>
			<view class="" v-if="tabIndex === 1">
				<view v-for="(item, index) in 2" class="mb-3" style="border-bottom: 2px solid #e3e3e3;">
					<u-field v-model="mobile" :border-bottom="false" label="基地名称：" :disabled="true"
						 label-width="160" style="padding:3px 15px; ">
					</u-field>
					<u-field v-model="mobile" :border-bottom="false" label="联系人：" :disabled="true"
						 label-width="120" style="padding:3px 15px; "></u-field>

					<u-field v-model="mobile" :border-bottom="false" label="联系电话：" :disabled="true"
						label-width="140" style="padding:3px 15px; "></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="基地位置："
						 label-width="140" style="padding:3px 15px;"></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="基地面积(m²)："
						 label-width="200" style="padding:3px 15px;"></u-field>
					<u-field v-model="mobile" :border-bottom="false" label="基地产品介绍：" :disabled="true"
						 label-width="200" style="padding:3px 15px;">
					</u-field>
					<view class="flex-y pl-3 pb-3">
						<view>基地图片:</view>
						<image style="width: 142px; height: 100px; left:20px;" src="../../../static/logo.png" mode="">
						</image>
					</view>

				</view>
			</view>
			<view class="" v-if="tabIndex === 2">
				<view class="px-3 tab-item" v-for="(item,index) in tabBar" :id="'tab'+index" @click="changeTabs(index)"
					:key="index">
					<view class="font-16 dfex" :class="tabBarIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
				<view v-if="tabBarIndex === 0">
					<view>
						<u-field v-model="mobile" :border-bottom="false" label="产品名称：" :disabled="true"
							label-width="160">
						</u-field>
						<u-field v-model="mobile" :border-bottom="false" label="基地名称：" :disabled="true"
							label-width="160"></u-field>
					</view>
				</view>
				<view v-if="tabBarIndex === 1">
					<view>
						<u-field v-model="芒果" :border-bottom="false" label="产品名称：" :disabled="true" label-width="160">
						</u-field>
						<u-field v-model="三亚" :border-bottom="false" label="基地名称：" :disabled="true"
							label-width="160"></u-field>
					</view>
				</view>
			</view>
			<view class="" v-if="tabIndex === 3">
				<view class="flex-y pl-3 py-2 pr-3">
					<view>营业执照：</view>
					<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="flex-y pl-3 py-2 pr-3">
					<view>商标证明：</view>
					<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="flex-y pl-3 py-2 pr-3">
					<view>专利证明：</view>
					<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="flex-y pl-3 py-2 pr-3">
					<view>行政许可执照：</view>
					<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="flex-y pl-3 py-2 pr-3">
					<view>涉农认证证书：</view>
					<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
				</view>

			</view>

			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";

	export default {
		components: {
			ferrButton,
			freeConfirm
		},
		data() {
			return {
				id: undefined,
				mobile: '测试奢侈',
				placeholderStyle: {
					color: '#999'
				},

				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				form: {
					name: '',
					intro: ''
				},
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabBars: [{
						"id": 1,
						"name": "主体信息"
					},
					{
						"id": 2,
						"name": "基地信息"
					},
					{
						"id": 3,
						"name": "产品信息"
					},
					{
						"id": 4,
						"name": "证件信息"
					},
				],
				tabBarIndex: 0,
				tabBar: [{
						"id": 1,
						"name": "芒果",
						"template": "new"
					},
					{
						"id": 2,
						"name": "产品分类",
						"template": "tit"
					},
				],
				natureBusinessMap: {
					// 经营范围 1科技类 2文化、传媒广告类 3咨询类 4管理类 5商贸类
					"1": "科技类",
					"2": "文化、传媒广告类",
					"3": "咨询类",
					"4": "管理类",
					"5": "商贸类"
				},
				baseInformPageSize: 10,
				baseInformPageNo: 1,
				baseInformList: [],
				userInfo: {

				}

			}


		},
		computed: {


		},
		onLoad(options) {
			this.id = options.id;
			this.getUserInfo();
			this.getBaseInformList();
		},

		methods: {
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;
			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			changeTabs(index) {
				if (this.tabBarIndex === index) return;
				this.tabBarIndex = index;
				this.scrollinto = "tab" + index;
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中'
				});

				$H.get(
					"/brand/user/queryById", {
						id: this.id,
					}, {}
				).then((res) => {
					if (!res.success) {
						uni.showToast({
							title: "未查询到相关信息",
							icon: "none",
						});
						return;
					}
					this.userInfo = res.result;
					this.userInfo.fullAvatar = $H.getFullImageUrl(res.result.businessLicense);
					this.userInfo.natureBusinessText = this.natureBusinessMap[res.result.natureBusiness];
					uni.hideLoading();
				}).catch(error => {
					console.error('请求出错', error); // 处理任何错误
					uni.showToast({
						title: "查询错误",
						icon: "none",
					});
					uni.hideLoading();
				})
			},
			getBaseInformList() {
				uni.showLoading({
					title: '加载中'
				})
				$H.get('/agriculture/baseInform/upper/follow/list', {
						pageNo: this.baseInformPageNo,
						pageSize: this.baseInformPageSize,
						id: this.id
					}, {})
					.then((res) => {
						uni.hideLoading()
						if (res.result.records.length == 0) {
							uni.showToast({
								title: "没有更多啦！",
								icon: "success",
							});
							return;
						}
						this.baseInformList.push(...res.result.records);
					})
					.catch((error) => {
						uni.hideLoading()
						console.error("请求出错", error); // 处理任何错误
					});
			}


		}
	}
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 13px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>